<template>
  <el-dialog
    style="border-radius: 10px"
    v-model="dialogVisible"
    :width="width"
    :style="{ height: height, background: color }"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <template #header>
      <div class="dialog-header">
        {{ title }}
      </div>
    </template>
    <slot></slot>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
    width: {
      type: String,
      default: '500px',
    },
    height: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
    close() {
      this.dialogVisible = false;
    },
  }
}
</script>

<style lang="scss" scoped>
.dialog-header {
  height: 50px;
  line-height: 50px;
  color: #000;
  text-align: center;
  border-bottom: 1px solid #f5f5f5;
}
</style>
